<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>amCharts examples</title> 
        <script src="../../amcharts/javascript/amcharts.js" type="text/javascript"></script>
        <script src="../../amcharts/javascript/raphael.js" type="text/javascript"></script>        
        
        <script type="text/javascript">

            var chartData = [{country:"USA",visits:4252},
                            {country:"China",visits:1882},
                            {country:"Japan",visits:1809},
                            {country:"Germany",visits:1322},
                            {country:"UK",visits:1122},
                            {country:"France",visits:1114},
                            {country:"India",visits:984},
                            {country:"Spain",visits:711},
                            {country:"Netherlands",visits:665},
                            {country:"Russia",visits:580},
                            {country:"South Korea",visits:443},
                            {country:"Canada",visits:441},
                            {country:"Brazil",visits:395},
                            {country:"Italy",visits:386},
                            {country:"Australia",visits:384},
                            {country:"Taiwan",visits:338},
                            {country:"Poland",visits:328}];
            
            window.onload = function() 
            {
                // Pie chart
                var chart1 = new AmCharts.AmPieChart();
                chart1.dataProvider = chartData;
                
                chart1.valueField = "visits";
                chart1.titleField = "country";
                chart1.angle = 5;
                chart1.depth3D = 5;
                chart1.innerRadius = 10;
                chart1.groupPercent = 3;
                chart1.startDuration = 1.5;
                chart1.startRadius = 100;
                chart1.marginLeft = 0;
                chart1.marginRight = 0;
                chart1.labelWidth = 100;
                
                var legend = new AmCharts.AmLegend();
                chart1.addLegend(legend);
                
                chart1.write("chartdiv1");
                
                
                // Column chart
                var chart2 = new AmCharts.AmSerialChart();
                chart2.dataProvider = chartData;
                chart2.categoryField = "country";
                chart2.marginTop = 15;
                chart2.marginLeft = 55;
                chart2.marginRight = 15;
                chart2.marginBottom = 80;
                chart2.angle = 30;
                chart2.depth3D = 15;
                
                var catAxis = chart2.categoryAxis;
                catAxis.gridCount = chartData.length;
                catAxis.gridPosition = "start";
                catAxis.labelRotation = 90;
                
                var graph = new AmCharts.AmGraph();
                graph.balloonText = "[[category]]: [[value]]";
                graph.valueField = "visits"
                graph.type="column";
                graph.lineAlpha = 0;
                graph.fillAlphas = 0.8;
                chart2.addGraph(graph);
                
                var chartCursor = new AmCharts.ChartCursor();
                chartCursor.zoomable = false;
                chartCursor.cursorAlpha = 0;
                chartCursor.categoryBalloonEnabled = false;
                chart2.addChartCursor(chartCursor);
                chart2.write('chartdiv2');
            }
        
        </script>
    
    </head>
    
    <body>
        <div id="chartdiv1" style="width: 50%; float:left; height: 400px;"></div>
        <div id="chartdiv2" style="width: 50%; float:left; height: 400px;"></div>
    </body>
</html>


